<!-- 邀请收益 -->
<template>
	<div class="award flex flex-v flex-align-center" :class="[backImgClass]">
		<div class="invite-award-btn">
			<div>
				<img :src="imgUrl+'vip/hair_ring_btn.png'" alt @click="toMaterialList" />
			</div>
			<div>
				<img :src="imgUrl+'vip/invitation_poster_btn.png'" alt @click="invitationPoster" />
			</div>
		</div>
		<div class="step-container flex flex-v flex-align-center">
			<img :src="imgUrl+'vip/step.png'" />
		</div>
		<div class="rank-container">
			<div class="default-title flex flex-v flex-align-center">
				<img :src="imgUrl+'vip/award-title-bg.png'" />
				<span>本周收益排行榜</span>
			</div>
			<div class="default-content flex flex-v flex-align-center">
				<div v-for="(item, index) in rankList" :key="index" class="rank-item flex flex-pack-justify flex-align-center" :class="'rank-item'+index">
					<img class="rank-icon" v-if="index == 0" :src="imgUrl+'center/icon_rank1.png'" />
					<img class="rank-icon" v-else-if="index == 1" :src="imgUrl+'center/icon_rank2.png'" />
					<img class="rank-icon" v-else-if="index == 2" :src="imgUrl+'center/icon_rank3.png'" />
					<span class="rank-index" v-else>{{index}}</span>

					<div class="flex flex-pack-justify-start flex-align-center" style="width:55%">
						<div class="user-picture">
							<img class :src="item.picture" />
						</div>
						<span class="user-name">{{item.name | formatName}}</span>
					</div>

					<span class="user-price">￥{{item.price}}</span>
				</div>
			</div>
		</div>
		<!-- 分享弹窗 -->
		<v-sharePoster ref="sharePoster" :type="6"></v-sharePoster>
	</div>
</template>

<script>
import sharePoster from '@/pages/components/sharePoster'
import { mapState, mapGetters } from 'vuex'
import { getSpreadIndex } from '@/utils/common'
export default {
	name: 'inviteShop',
	components: {
		'v-sharePoster': sharePoster
	},
	data() {
		return {
			imgUrl: this.$constant.imgUrl,
			backImgClass: this.$constant.oemSource == 3 ? `award-wj` : `award-default`,
			//   头像
			rankList: [
				{
					picture: this.$constant.imgUrl + 'userAttr/2.jpg',
					name: '春暖花开',
					price: 6800
				},
				{
					picture: this.$constant.imgUrl + 'userAttr/1.jpg',
					name: 'peter',
					price: 6767
				},
				{
					picture: this.$constant.imgUrl + 'userAttr/3.jpg',
					name: '小笼包',
					price: 6767
				},
				{
					picture: this.$constant.imgUrl + 'userAttr/4.png',
					name: '徐宝平',
					price: 6427
				},
				{
					picture: this.$constant.imgUrl + 'userAttr/6.jpg',
					name: 'A袁中平',
					price: 6394
				},
				{
					picture: this.$constant.imgUrl + 'userAttr/7.jpg',
					name: '江小7',
					price: 6361
				},
				{
					picture: this.$constant.imgUrl + 'userAttr/8.jpg',
					name: '蒋小明',
					price: 6021
				},
				{
					picture: this.$constant.imgUrl + 'userAttr/9.jpg',
					name: '深夜买醉｀',
					price: 5681
				},
				{
					picture: this.$constant.imgUrl + 'userAttr/10.jpg',
					name: '朱一通',
					price: 5648
				},
				{
					picture: this.$constant.imgUrl + 'userAttr/11.jpg',
					name: '逆风方向.',
					price: 5615
				}
			]
		}
	},
	filters: {
		formatName(name) {
			if (name.length >= 7) {
				return name.substr(0, 7) + '...'
			}
			return name
		}
	},

	computed: {
		...mapState({
			user_id: state => state.user.user.user_id
		}),
		...mapGetters({ userInfo: 'getUser' })
	},

	mounted() {
		// this.shareWeixin()
	},

	methods: {
		shareWeixin() {
			let userInfo = this.$store.getters.getUser
			let owner_user_id = this.$route.query.owner_user_id
			let puser_id = this.$route.query.share_user_id
			let obj = {
				title: userInfo.nick_name + '邀请你一起开店创业', // 分享标题
				desc: '20秒注册开启您的专属获客神器', // 分享内容
				linkurl: userInfo.invite_register_hkds_url, // 分享链接
				img: userInfo.user_picture // 分享内容显示的图片
			}
			// this.$wxshare.getJSSDK(userInfo.invite_register_hkds_url, obj, owner_user_id, puser_id)
		},
		jumpAwardDetailPage() {
			// this.$router.push({
			//     name: 'AwardDetail'
			// })
		},
		jumpToInviteToVipPage() {
			// this.$router.push({
			//     name: 'InviteToVip'
			// })
		},
		invitationPoster() {
			// this.$router.push({
			//       name: 'WinPoster',
			// })
			this.$refs.sharePoster.showMask()
		},
		toMaterialList() {
			uni.navigateTo({
				url: `/pages/getGuest/shareList?from=inviteShop`
			})
			// this.$router.push({
			//     name: 'shareMaterialList',
			//     query: {
			//         from: 'inviteShop'
			//     }
			// })
		}
	},
	// 微信分享
	onShareAppMessage: function(options) {
		let url = getSpreadIndex()
		let _endUrl = '?owner_user_id=' + this.userInfo.user_id + '&f=poster'
		const shareObj = {
			title: this.userInfo.nick_name + '邀请你一起开店创业',
			path: `/pages/page/login/index${_endUrl}&share_user_id=${this.userInfo.user_id}`
		}
		return shareObj
	}
}
</script>
<style lang='scss' scoped>
	// .rank-item-1 .flex-2{
	//     margin-left: 10px;
	// }
	// .rank-item-2 .flex-2{
	//     margin-left: 10px;
	// }
	// .rank-item-3 .flex-2{
	//     margin-left: 10px;
	// }
	.award-default {
		background-image: url($imgUrl+'vip/invite-award-bg.png') !important;
	}
	.award-wj {
		background-image: url($imgUrl+'vip/invite-award-bg-wj.png') !important;
	}
	.award {
		width: 100%;
		background: #fd5319;
		background-size: 100% 884px;
		background-repeat: no-repeat;
		.invite-award-btn {
			width: 90%;
			height: 142px;
			margin-top: 300px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// justify-content: center;
			& > div {
				width: 48%;
				img {
					width: 100%;
					height: 102px;
				}
			}
		}
		.step-container {
			width: 600px;
			height: 243px;
			background: #ffffff;
			border-radius: 20px;
			padding: 36px;
			margin-top: 300px;
			margin-bottom: 30px;
			box-shadow: #e93511 0px 4px 32px 0px;
			img {
				width: 670px;
				height: 279px;
			}
		}
		.default-title {
			img {
				width: 437px;
				height: 65px;
				position: absolute;
				z-index: 8;
			}
			span {
				z-index: 9;
				text-align: center;
				line-height: 65px;
				font-size: 32px;
				color: #522310;
				position: relative;
			}
		}
		.award-container {
			margin: 29px 0;
			width: 670px;
			height: 100%;
			.default-content {
				background: #ffffff;
				position: relative;
				top: -18px;
				width: 560px;
				height: 100px;
				padding: 75px 51px;
				border-radius: 20px;
				box-shadow: #e93511 0px 4px 32px 0px;
				.total-box {
					width: 100%;
					color: #333333;
					font-size: 40px;
					line-height: 24px;
					.desc {
						color: #666666;
						font-size: 24px;
						margin-top: 24px;
					}
				}
				.orange {
					margin-top: 39px;
					color: #ff6900;
					font-size: 28px;
					line-height: 35px;
				}
			}
		}
		.rank-container {
			width: 670px;
			height: 100%;
			overflow: auto;
			.default-content {
				background: #ffffff;
				position: relative;
				top: -18px;
				width: 560px;
				padding: 75px 51px;
				border-radius: 20px;
				box-shadow: #e93511 0px 4px 32px 0px;
				.rank-item {
					width: 100%;
					height: 68px;
					padding: 21px 32px;
					box-shadow: #dddddd 0px 1px 0px 0px;
				}
				.rank-index {
					width: 48px;
					color: #999999;
					font-size: 48px;
					line-height: 36px;
					margin-left: 10px;
					text-align: center;
				}
				.rank-icon {
					width: 48px;
					height: 60px;
				}
				.user-picture {
					width: 60px;
					height: 60px;
					margin-right: 10px;
					border-radius: 50%;
					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.user-name {
					color: #333333;
					word-spacing: 0.6px;
					// line-height: 24px;
					font-size: 30px;
					// width: calc(100% - 70px);
				}
				.user-price {
					color: #ff6900;
					word-spacing: 0.6px;
					line-height: 24px;
					font-size: 30px;
				}
			}
		}
	}
</style>
